<template>
  <div class="themes-select-type">
    <mu-dialog
      dialog-class="themes-select-type-info"
      width="660"
      :overlay-close="false"
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      transition="scale"
      :open.sync="themesTypeDialog"
    >
      <div class="themes-type-head">
        <div class="back">
          <img
            src="https://image.xuexiwangzhe.com/FkNOutzKjCfTafy_J4W0OnbS6QFb"
            @click="lastStep"
          />
        </div>
        <div class="fork">
          <img
            src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG"
            @click="changeThemesTypeDialog"
          />
        </div>
      </div>
      <div class="themes-type-title">想要创建哪种类型的主题？</div>
      <div class="themes-type-select">
        <div
          class="themes-type-select-option"
          :class="{'themes-type-select-option-active': selectIndex === index}"
          v-for="(item, index) in selectOption"
          :key="index"
          @click="selectIndex = index"
        >
          <img :src="item.activeOption" v-if="selectIndex === index"/>
          <img :src="item.option" v-else>
          <div class="themes-type-select-option-text">{{ item.text }}</div>
        </div>
      </div>
      <div class="create-themes-footer">
        <mu-button class="create-themes-cancel" color="#ffffff" round @click="lastStep">
          上一步
        </mu-button>
        <mu-button
          class="create-themes-botton"
          color="#265CFF"
          :disabled="selectIndex < 0"
          round
        >
          确定
        </mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // http://image.xuexiwangzhe.com/FoC7nnCdy_NDCgL8u4-cP0G3vn0_ 评估
      // http://image.xuexiwangzhe.com/FvYScoZ-Hhnrb0nlyiM9vkKzLzAh 考试
      // http://image.xuexiwangzhe.com/FlBe3IdTi7ebWeIPyhNDIYCTnm_8 签到
      // http://image.xuexiwangzhe.com/FgHO6q8gqXXFGvwLF9-x2GhBfVqT 作业
      // http://image.xuexiwangzhe.com/FkL-yXMuWLbctesvXsy3QOdJ8gQZ 内容
      themesTypeDialog: false,
      selectOption: [
        {
          activeOption: "https://image.xuexiwangzhe.com/Fo5K1CVAnn-UREgXo0sNWiBNSY9W",
          option: "https://image.xuexiwangzhe.com/FkL-yXMuWLbctesvXsy3QOdJ8gQZ",
          text: "内容",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FsZ2wtOQmN5gWlblIa74qPQ9opZu",
          option: "https://image.xuexiwangzhe.com/FgHO6q8gqXXFGvwLF9-x2GhBfVqT",
          text: "作业",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FkftCQNG4ZqpSAgnIonTVMOmV-FX",
          option: "https://image.xuexiwangzhe.com/FpjdynGQ7L-Mo293ExFZ2LcXiv2E",
          text: "直播",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FiF2H5s_Jfuv4p4nTfEZ-0GlGgq0",
          option: "https://image.xuexiwangzhe.com/FvYScoZ-Hhnrb0nlyiM9vkKzLzAh",
          text: "考试",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FuFgx4kNQ-GctZqwGsOtNa_gZGr8",
          option: "https://image.xuexiwangzhe.com/FlBe3IdTi7ebWeIPyhNDIYCTnm_8",
          text: "签到",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FqdmEw9jgNaanLKOfIf2olrvdxDr",
          option: "https://image.xuexiwangzhe.com/FoC7nnCdy_NDCgL8u4-cP0G3vn0_",
          text: "评估",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FsjrnCDepq_nhXEmpI3VND__fFIP",
          option: "https://image.xuexiwangzhe.com/FuaU_gsjWpXUY3JHHReSS3g8sZjZ",
          text: "投票",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FuTvy1UqrJHntwvD3hbfSXelsrVj",
          option: "https://image.xuexiwangzhe.com/FgZmVlHS4YMk2LxEtdwrV3sFHcBv",
          text: "调研",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FtzPLXlMsU8293vehk3BlQkRiwWy",
          option: "https://image.xuexiwangzhe.com/Fm1Q6C4-svVcQVC523K5nWphElJs",
          text: "PK对战",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/FqOzOXAGRFsN5EGltVgCE-EnsNZz",
          option: "https://image.xuexiwangzhe.com/FjuA_IntEBq0m3BwewxU1CWNMgSi",
          text: "人机陪练",
          lock: 0,
        },
        {
          activeOption: "https://image.xuexiwangzhe.com/Fg1GMsYPktbh4nfsEm8O7KBiCB0c",
          option: "https://image.xuexiwangzhe.com/FvUpj9L-YKmpgJtF4Ovr-aiIWsBO",
          text: "极限挑战",
          lock: 0,
        },
      ],
      selectIndex: -1,
    };
  },
  methods: {
    changeThemesTypeDialog() {
      this.themesTypeDialog = !this.themesTypeDialog;
    },
    lastStep() {
      this.changeThemesTypeDialog();
      this.$parent.changeThemesDialog();
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.themes-select-type-info {
  border-radius: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .mu-dialog-body {
    padding: 27px 30px 30px 30px;
    color: #333333;
  }

  .themes-type-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    .back img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .fork img {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }

  .themes-type-title {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 41px;
  }

  .themes-type-select {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;

    .themes-type-select-option {
      width: 75px;
      height: 75px;
      border-radius: 15px;
      border: 1px solid #e6e6e6;
      cursor: pointer;
      margin-left: 30px;
      margin-bottom: 30px;

      &:first-child {
        margin-left: 0px;
      }
      &:nth-child(7) {
        margin-left: 0px;
      }


      img {
        width: 36px;
        height: 36px;
        vertical-align: bottom;
        margin-top: 12px;
      }
      div {
        font-size: 12px;
      }
    }
    .themes-type-select-option-active {
      border: 1px solid #265CFF;
      color: #265CFF;
    }
  }

  .create-themes-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
  }
  .create-themes-botton {
    width: 120px;
    height: 30px;
    box-shadow: none;
    margin-left: 21px;
  }
  .create-themes-cancel {
    color: #666666;
    border: 1px solid #666666;
    width: 120px;
    height: 30px;
    box-shadow: none;
  }
  .mu-raised-button.disabled.disabled {
    color: #ffffff;
  }
}
</style>